<script setup>
import { ref } from "vue";
import { getMyOrderListApi } from "@/api/order.js";
import { useRoute } from "vue-router";

const route = useRoute();

const active = ref(route.query.dataType ? route.query.dataType : "all");
const orderList = ref([]);
const tabChange = () => {
  getMyOrderList();
};
const getMyOrderList = async () => {
  const res = await getMyOrderListApi(active.value, "1");
  orderList.value = res.data.list.data;
};
getMyOrderList();
</script>

<template>
  <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />

  <van-tabs v-model:active="active" @change="tabChange">
    <van-tab name="all" title="全部"></van-tab>
    <van-tab name="payment" title="待支付"></van-tab>
    <van-tab name="delivery" title="待发货"></van-tab>
    <van-tab name="received" title="待收货"></van-tab
    ><van-tab name="comment" title="待评价"></van-tab>
  </van-tabs>

  <OrderItem
    v-for="item in orderList"
    :item="item"
    :key="item.order_id"
    v-if="orderList.length > 0"
  ></OrderItem>

  <van-empty description="空空如也" v-else />
</template>

<style scoped lang="scss"></style>
